<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>simple-vue</title>

</head>
<body>
<div class="vue-ajax">
    <h1>{{ posts.category }}</h1>
    <ul v-for="item in posts.article">
        <li>{{ item.title }}</li>
        <li>{{ item.author }}</li>
    </ul>
</div>

<!--<script src="https://unpkg.com/vue"></script>-->
<!--<script src="vue-resource.js"></script>-->

<!-- 低版本的VUE -->
<!-- 引入veujs -->
<script src="js/vue.1.0.24.js"></script>
<!-- 引入用于配合vuejs执行ajax操作的插件 -->
<script src="js/vue-resource.0.7.0.js"></script>
<script>
    // ajax 获取数据
    var vm2=new Vue({
        el: '.vue-ajax',
        data: {
            posts:{}
        },
        // 页面加载的时候会自动执行ready
        ready: function(){
            // 等同于jquery的$.get()
            this.$http.get('data.php').then(function(response){
                console.log(response);
                this.posts=response.data;
            })
        }
    });
</script>
</body>
</html>